<script lang="ts" setup>
import { reactive } from 'vue';

import { ColPage, Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { ElButton, ElTooltip } from 'element-plus';

const props = reactive({
  leftCollapsedWidth: 5,
  leftCollapsible: true, // 左侧可折叠
  leftMaxWidth: 50, // 左侧最大宽度百分比
  leftMinWidth: 15, // 左侧最小宽度百分比
  leftWidth: 20,
  resizable: true, // 可拖动调整宽度
  rightWidth: 80,
  splitHandle: true, // 显示拖动手柄
  splitLine: true, // 显示拖动分隔线
});

/** 业务逻辑 */
</script>
<template>
  <ColPage auto-content-height v-bind="props">
    <!-- 左侧内容开始 -->
    <template #left="{ isCollapsed, expand }">
      <div v-if="isCollapsed" @click="expand">
        <ElTooltip class="box-item" effect="dark" content="点击展开左侧">
          <ElButton circle type="primary">
            <template #icon>
              <IconifyIcon class="text-2xl" icon="bi:arrow-right" />
            </template>
          </ElButton>
        </ElTooltip>
      </div>
      <div
        v-else
        :style="{ minWidth: '200px' }"
        class="border-border bg-card mr-2 rounded-[var(--radius)] border p-2"
      >
        <Page auto-content-height>左侧内容区域</Page>
      </div>
    </template>
    <!-- 左侧内容结束 -->
    <!-- 右侧内容开始 -->
    <!-- 右侧内容结束 -->
  </ColPage>
</template>
